<template>
<div class="colour-line">
  <ve-line width="width" height="100%" :settings="settings"  :data="chartData"  :extend="chartExtend"></ve-line>
</div>
</template>
<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  name: 'colour-line',
  props: {
    chartData: Object, // 图表数据
    settings: Object,
    isMoney: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      charttooltip: {
        formatter: function(params) {
          // 计算金额
          var relVal = [`{test|${params[0].name}}`]
          for (var i = 0, l = params.length; i < l; i++) {
            relVal.push(`{test|${params[i].seriesName}：${parseInt(params[i].value[1] / 100)}元}`)
          }
          return relVal.join('\n')
        },
        rich: {
          test: {
            color: '#ffffff',
            display: 'block'
          }
        }
      },
      chartExtend: { // 基本设置
        tooltip: {
          trigger: 'axis',
          triggerOn: 'mousemove',
          axisPointer: {
            type: 'line'
          },
          position: ['40%', '30%'],
          // confine: true,
          renderMode: 'richText',
          formatter: function(params) {
            // 计算金额
            var relVal = [`{test|${params[0].name}}`]
            for (var i = 0, l = params.length; i < l; i++) {
              relVal.push(`{test|${params[i].seriesName}：${parseInt(params[i].value[1])}}`)
            }
            return relVal.join('\n')
          },
          rich: {
            test: {
              color: '#ffffff',
              display: 'block'
            }
          }
        },
        grid: { // 绘图网格
          top: '13',
          left: '0',
          right: '10',
          bottom: '40',
          containLabel: true, // 是否含刻度线
          borderColor: '#F1F1F1',
          width: '99%',
          zlevel: 0
        },
        yAxis: { // Y轴设置
          gridIndex: 0, // Y轴索引
          offset: 0,
          zlevel: 0,
          splitLine: { // 分割线
            lineStyle: {
              color: '#F1F1F1'
            }
          },
          axisLabel: { // 刻度标签
            textStyle: {
              fontSize: 11,
              color: '#333',
              fontWeight: '600',
            }
          }
        },
        xAxis: { // X轴设置
          show: true, // 是否展示
          axisLine: { // 坐标轴轴线设置
            show: true,
            lineStyle: {
              color: '#394694',
              width: 2,
              opacity: 1,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          axisTick: { // 坐标轴刻度设置
            show: true,
            length: 4,
            alignWithLabel: false,
            lineStyle: {
              width: 2
            },
            alignWithLabel: true,
          },
          axisLabel: { // 刻度标签
            fontWeight: '600',
            color: '#333'
          },
          zlevel: 10
        },
        series: // 系列列表（图表类型）
          {
            type: 'line',
            symbol: 'circle', // 标记类型
            symbolSize: 6, // 标记大小
            lineStyle: { // 线条样式
              width: 2
            },
          },
        legend: { // 图例组件
          selectedMode: false, // 控制是否可以点击展示/隐藏图列
          align: 'left',
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            height: 12,
            lineHeight: 11,
            fontSize: 12,
            color: '#333'
          }
        }
      },
    }
  },
  components: {
    've-line': VeLine
  },
  created() {
    if (this.isMoney) {
      this.chartExtend.tooltip = { ...this.chartExtend.tooltip, ...this.charttooltip }
      this.chartExtend.yAxis.axisLabel = {
        textStyle: {
          fontSize: 11,
          color: '#333',
          fontWeight: '600',
        },
        formatter: (value) => { return value > 1000000 ? value / 1000000 + 'w' : value / 100 } }
    }
  },
}
</script>
<style  lang="scss" scoped>
  .colour-line{
    height: 320px;
  }
</style>
